<template>
  <div class="message-notify-setting d-flex flex-column gap-col-16">
    <div class="d-flex flex-column gap-col-4">
      <div class="d-flex justify-space-between">
        <div class="font-size-14 font-weight-500 line-height-140">{{ $t('message.commentNotify') }}</div>
        <InputSwitch v-model="commentNotify"></InputSwitch>
      </div>
      <div class="font-size-10 font-weight-400 line-height-120" :style="{ color: '#959595' }">
        {{ $t('content.commentMsg') }}
      </div>
    </div>
    <div class="d-flex flex-column gap-col-4">
      <div class="d-flex justify-space-between">
        <div class="font-size-14 font-weight-500 line-height-140">{{ $t('message.replyNotify') }}</div>
        <InputSwitch v-model="replyNotify"></InputSwitch>
      </div>
      <div class="font-size-10 font-weight-400 line-height-120" :style="{ color: '#959595' }">
        {{ $t('content.replyMsg') }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import InputSwitch from '@/components/form/InputSwitch.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { COMMENT_NOTIFY, REPLY_NOTIFY } from '@/constant/chat'

const accountStore = useAccountStore()
const { userData } = storeToRefs(accountStore)

const notifyArr = userData.value.notice.split(',')

const commentNotify = ref(notifyArr[0] === COMMENT_NOTIFY.ON)
const replyNotify = ref(notifyArr[1] === REPLY_NOTIFY.ON)

useConfirmData(validator)
function validator() {
  return {
    commentNotify: commentNotify.value,
    replyNotify: replyNotify.value,
  }
}
</script>
